<template>
    <div class="container">
        <h1>HelloWorld</h1>
        <p>总和：{{sum}}<br /></p>
        <p>放大10倍值:{{BigSum}}<br /></p>
        <p>职位：{{job}}</p>
        <p>地址：{{address}}</p>
        <p></p>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+</button>
        <button @click="unadd">-</button>
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name:'HelloWorld',
    data(){
        return {
            n: 1
        }
    },
    computed:{
        ...mapState(['sum','job','address']),
        ...mapGetters(['BigSum'])
    },
    mounted(){
        const x = mapState({sum:'sum',job:'job',address:'address'})
        const getters = mapGetters({BigSum:'BigSum'})
        console.log(x)
        console.log(getters)
    },
    methods:{
        add(){
            this.$store.dispatch('add',this.n)
        },
        unadd(){
            this.$store.dispatch('unadd',this.n)
        }
    }
}
</script>
